<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="table">
        <ul class="jbxx">
            <li>姓名</li>
            <li>性别</li>
            <li>年龄</li>
            <li>手机</li>
            <li>邮箱</li>
            <li>操作</li>
        </ul>    
        <ul class="sj">
            <li class="name">张三</li>
            <li>男</li>
            <li>20</li>
            <li>13012345678</li>
            <li>123456@qq.com</li>
            <li><button class="update">修改</button><button class="delete">删除</button></li>
        </ul>
    </div>  
    <button class="add">增加</button>
    
    
        <div class="add-tcys">
            姓名： <input type="text" class="username">
            性别： <select name="" id="">
                <option value="0">男</option>
                <option value="1">女</option>
            </select>
            年龄： <input type="text" class="userage">

            <button class="ok">完成</button>
        </div>


    
    <script>
        $(function () {

        })
        //删除
        $(".delete").click(function () {
            $(this).parent().parent().remove()
        })
        //修改
        $(".update").click(function () {
            $(this).parent().parent().attr()
            // $("sj").attr("li")
        })
        //增加
        var arr=[];
        // var addtoo=function(){ 
            
            
        //     $(".add").show();
        //     $(".add").click(function(){
        //         $(".add-tcys").show();
        //         var str=$("<ul></ul>");
        //         $(".add").find("input").each(function(){
        //             arr.push($(this).val())
        //         })
        //         str.append('<li>'+arr[0]+'</li><li>'+arr[1]+'</li><li>'+arr[2]+'</li><li>'+arr[3]+'</li><li>'+arr[4]+'</li><li><button class="update">修改</button><button class="delete">删除</button></li>');
        //         $(".table").append(str);
        //         // $(".add").hide();
        //     })
        // // }
        //     $(document).off("click",".add",addtoo)
        //     $(document).on("click",".add",addtoo)

        $(".add").click(function(){
            $(".add-tcys").show();
        })
        $(".ok").click(function(){
            $(".add-tcys").hide();
            

        })
    </script>
</body>

</html>